<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.pie.js" ></script>
    
    <title>Pie chart RoundRobin then Explode</title>

    <meta name="description" content="A Pie chart using the RoundRobin effect and then exploding" />
     
</head>
<body>

    <h1>Pie chart effect then explode</h1>

    <canvas id="cvs" width="450" height="300">[No canvas support]</canvas>
    
    <script>
        var pie1 = new RGraph.Pie('cvs', [21,12,25,17,7])
            .Set('radius', 100)
            .Set('tooltips', ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)'])
            .Set('labels', ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)'])
            .Set('strokestyle', 'white')
            .Set('linewidth', 5)
            .Set('shadow', true)
            .Set('shadow.blur', 10)
            .Set('shadow.offsetx', 0)
            .Set('shadow.offsety', 0)
            .Set('shadow.color', '#000')
            .Set('text.color', '#999')
        
        var explode = 20;

        function myExplode (obj)
        {
            window.__pie__ = pie1;

            for (var i=0; i<obj.data.length; ++i) {
                setTimeout('window.__pie__.Explode('+i+',10)', i * 50);
            }
        }

        if (RGraph.isOld()) {
            pie1.Draw();
        
        } else if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
            RGraph.Effects.Pie.RoundRobin(pie1);
        
        } else {
            /**
            * The RoundRobin callback initiates the exploding
            */

            RGraph.Effects.Pie.RoundRobin(pie1, null, myExplode);
            RGraph.Effects.Pie.Implode(pie1);
        }
    </script>

    <p>        
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>